<template>
  <view class="container">
    <image
      class="dian"
      src="../../static/login/Ellipse16.png"
      mode="top"
    ></image>
    <view class="logo"><b>修改密码</b></view>

    <uni-forms :modelValue="formData">
      <uni-forms-item>
        <text class="text-label">账号</text>
        <uni-easyinput v-if="!uid" type="text" v-model="formData.uid" />
        <view v-if="uid">{{ uid }}</view>
      </uni-forms-item>

      <uni-forms-item>
        <text class="text-label">手机验证码</text>
        <uni-row>
          <uni-col :span="16">
            <uni-easyinput type="number" v-model="formData.mailCode" />
          </uni-col>
          <uni-col :span="8">
            <button
              class="btn-blue"
              style="padding-left: 5px; height: 35px; font-size: 14px"
              :disabled="sta != 'normal'"
              @click="onClickSendMailCode"
            >
              {{ btnStr() }}
            </button>
          </uni-col>
        </uni-row>
      </uni-forms-item>

      <uni-forms-item>
        <text class="text-label">密码</text>
        <uni-easyinput type="password" pa v-model="formData.pwd" />
        <text style="font-size: 11px; font-weight: 500; color: #999999"
          >*密码为8-20位,数字、字母和特殊字符至少两种</text
        >
      </uni-forms-item>
      <uni-forms-item>
        <text class="text-label">确认密码</text>
        <uni-easyinput type="password" pa v-model="formData.confirmPwd" />
      </uni-forms-item>
    </uni-forms>
    <view style="padding: 30px"></view>
    <button class="btn-blue" @click="onClickReset">提交</button>
  </view>
</template>

<script>
// import { resetPwd, sendSmsCode } from '../../net/http'
import { resetPwd, sendSmsCode } from "../../net/fenxi";
import { websock } from "../../net/websock";

export default {
  data() {
    return {
      formData: {
        uid: "",
        mailCode: "",
        pwd: "",
        confirmPwd: "",
      },
      uid: 0,
      timer: null,
      sta: "normal",
      countDown: 60000,
    };
  },
  onLoad(params) {
    this.uid = params.uid || 0;
    this.timer = setInterval(() => {
      if (this.sta == "countdown") {
        this.countDown -= 100;
        if (this.countDown < 0) {
          this.sta = "normal";
          this.countDown = 60000;
        }
      }
    }, 100);
  },
  onUnload() {
    clearInterval(this.timer);
  },
  methods: {
    btnStr() {
      if (this.sta == "normal") return "获取验证码";
      return parseInt(this.countDown / 1000) + "S";
    },
    onClickSendMailCode() {
      let phonenumber = this.uid || parseInt(this.formData.uid);
      const params = {
        phonenumber: this.formData.uid,
      };
      if (!phonenumber)
        return uni.showToast({ title: "请输入账号", icon: "none" });
      this.sta = "countdown";
      console.log(params);
      //   const res = await sendSmsCode(params);
      //   if (res.code != 0) {
      //     return uni.showToast({ title: data.message, icon: "none" });
      //   }
      //   this.sta = "countdown";
      //   this.countDown = 60000;
      sendSmsCode(
        params,
        (res) => {
          console.log(res);
          // let data = res.data;
          if (res.code != 0) {
            return uni.showToast({ title: res.message, icon: "none" });
          }
          console.log("send mail", res);
          this.sta = "countdown";
          this.countDown = 60000;
        },
        () => {
          uni.showToast({ title: "发送失败，请检查网络连接", icon: "none" });
        }
      );
    },
    onClickReset() {
      let uid = this.uid || parseInt(this.formData.uid);
      if (!uid) return uni.showToast({ title: "请输入账号", icon: "none" });

      if (!this.formData.mailCode)
        return uni.showToast({
          title: "请输入验证码",
          icon: "none",
        });

      if (!this.formData.pwd)
        return uni.showToast({
          title: "请输入密码",
          icon: "none",
        });

      if (this.formData.pwd.length < 8)
        return uni.showToast({
          title: "密码小于8位",
          icon: "none",
        });

      if (this.formData.pwd.length > 20)
        return uni.showToast({
          title: "密码大于20位",
          icon: "none",
        });

      let specialCharStr = '`~!@#$%^&*()-_=+\\|;:\'"",<.>/?';
      let numStr = "1234567890";
      let letterStr = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
      let hasSpecailChar = false;
      let hasNum = false;
      let hasLetter = false;

      for (let i = 0; i < this.formData.pwd.length; i++) {
        if (specialCharStr.indexOf(this.formData.pwd[i]) != -1)
          hasSpecailChar = true;
        if (numStr.indexOf(this.formData.pwd[i]) != -1) hasNum = true;
        if (letterStr.indexOf(this.formData.pwd[i]) != -1) hasLetter = true;
      }

      if (!hasSpecailChar || !hasNum || !hasLetter)
        return uni.showToast({
          title: "必须包含数字、字母和特殊字符",
          icon: "none",
        });

      if (!this.formData.confirmPwd)
        return uni.showToast({
          title: "请确认密码",
          icon: "none",
        });

      if (this.formData.pwd != this.formData.confirmPwd)
        return uni.showToast({
          title: "两次密码不一致",
          icon: "none",
        });

      // uni.showLoading({ mask: true })
      const params = {
        phonenumber: uid,
        captcha: this.formData.mailCode,
        newPassword: this.formData.pwd,
      };
      resetPwd(params).then((res) => {
        if(res.code === 0) {
          uni.showToast({
            title: "修改成功",
            icon: "success",
          });
          uni.setStorageSync("uid", 0);
          uni.setStorageSync("token", "");
          store.uid = 0;
          store.token = "";
          store.userInfo = null;
          store.departList = null;
          store.posList = null;
          store.contachtList = null;
          websock.disconnect();
          uni.redirectTo({ url: "/pages/login/index" });
        } else {
          uni.showToast({
            title: "修改失败",
            icon: "error",
          });
        }
      }).catch(() => {
        uni.showToast({
            title: "修改失败",
            icon: "error",
          });
      });
    },
  },
};
</script>

<style>
.container {
  height: 100%;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 14px;
  line-height: 24px;
  background: linear-gradient(
    to bottom,
    rgba(11, 132, 123, 0.1) 50%,
    rgba(11, 132, 123, 0.4) 100%
  );
  background-repeat: no-repeat;
  background-size: 100%;
}

.dian {
  width: 56px;
  height: 56px;
  padding-top: 30px;
  padding-left: 250px;
}

.logo {
  padding-top: 1px;
  padding-left: 20px;
  padding-bottom: 34px;
  font-size: 32px;
  color: black;
  line-height: 1.5;
}

.form-input {
  height: 50px;
}

.demo-uni-col {
  height: 36px;
  border-radius: 3px;
}

.text-label {
  font-size: 14px;
  font-weight: 400;
  color: #858597;
  line-height: 16px;
  padding-bottom: 2px;
}

.text-link {
  color: #3d7fff;
  padding: 10px 0px 30px;
  font-size: 12px;
}

.text-min {
  color: #858597;
  padding: 10px 0px 30px;
  font-size: 11px;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.btn-blue {
  background-color: #0b847b;
  color: aliceblue;
}
</style>
